<template>
    <div class="shopSettleDetail">
        <div class="shopSettleDetail_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">结算详情<i class="el-icon-close"></i></div>
		</div>
        <div class="backBtn">
            <el-button type="success" @click="backBtn">返回</el-button>
        </div>
        <div class="content">
            <h3>基本信息</h3>
            <el-form>
                <el-form-item label="订单号" label-width="70px">
                    <el-input type="text" v-model="dataInfo.order_no" readonly></el-input>
                </el-form-item>
                <el-form-item label="结算状态" label-width="70px">
                    <el-input type="text" v-model="dataInfo.settle_status" readonly></el-input>
                </el-form-item>
                <el-form-item label="下单人" label-width="70px">
                    <el-input type="text" v-model="dataInfo.purchaser" readonly></el-input>
                </el-form-item>
                <el-form-item label="下单时间" label-width="70px">
                    <el-input type="text" v-model="dataInfo.create_time" readonly></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="70px">
                    <el-input type="text" v-model="dataInfo.mobile" readonly></el-input>
                </el-form-item>
                <el-form-item label="订单金额" label-width="70px">
                    <el-input type="text" v-model="dataInfo.order_price" readonly></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="tableBox">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="商家结算明细" name="1">
                    <shop-table ref="shopFn" :orderNo="dataInfo.order_no" :shopType="dataInfo.shopType"></shop-table>
                </el-tab-pane>
                <!-- <el-tab-pane label="导购结算明细" name="2" v-if="dataInfo.shopType=='1'">
                    <guide-table ref="guideFn" :orderNo="dataInfo.order_no" :shopType="dataInfo.shopType"></guide-table>
                </el-tab-pane> -->
                <el-tab-pane label="创客结算明细" name="3">
                    <maker-table ref="makerFn" :orderNo="dataInfo.order_no" :shopType="dataInfo.shopType"></maker-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import shopTable from '../components/shopTable/shopTable.vue';
import guideTable from '../components/guideTable/guideTable.vue';
import makerTable from '../components/makerTable/makerTable.vue';
export default {

    components:{
        shopTable,
        guideTable,
        makerTable
    },
    data(){
        return{
            activeName:'1',
            dataInfo:{},
            // shopType:''
        }
    },
    mounted() {
        let data = this.$route.query.data
        this.dataInfo = JSON.parse(decodeURIComponent(data))
        this.dataInfo.settle_status = this.dataInfo.settle_status==0?'待结算':'已结算';
        this.dataInfo.create_time = this.$moment(this.dataInfo.create_time*1000).format('yyyy-MM-DD')
        console.log(this.dataInfo,'数据数数据');
        // this.shopType = this.dataInfo.shopType=='1'?'shop':this.dataInfo.shopType=='2'?'desginer':this.dataInfo.shopType=='3'?'build':'';
    },
    methods: {
        // tabs切换
        handleClick(e){
            if(e.name=='1'){
                if(this.dataInfo.shopType=='1'){
                    this.$refs.shopFn.getShopOrderDetail()
                }else if(this.dataInfo.shopType=='2'){
                    this.$refs.shopFn.getDesginerOrderDetail()
                }else if(this.dataInfo.shopType=='3'){
                    this.$refs.shopFn.getBuildOrderDetail()
                }
            }else if(e.name=='2'){
                this.$refs.guideFn.getGuideOrderDetail()
            }else if(e.name=='3'){
                this.$refs.makerFn.getMakerOrderDetail()
            }
        },
        // 返回
        backBtn(){
            this.$router.back(1)
        }
    },
    
}
</script>
<style lang="less">
    @import 'index.less';
</style>

